<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块的整体加载</title>
</head>
<body>
    <h1>模块的整体加载</h1>

    <script type="module">
        // circle.js
        const area = function(radius) {
            return Math.PI * radius * radius;
        };
        const circumference = function(radius) {
            return 2 * Math.PI * radius;
        };
        export { area, circumference };

        // main.js
        import * as circle from './circle.js';
        console.log('圆面积：' + circle.area(4));
        console.log('圆周长：' + circle.circumference(14));

        // 整体加载的注意事项
        // 1. 整体加载的对象是只读的
        // circle.foo = 'hello'; // 错误

        // 2. export * 会忽略default
        // moduleA.js
        export const a = 1;
        export default function() {};

        // moduleB.js
        export * from './moduleA.js'; // 不会导出default
        export { default } from './moduleA.js'; // 需要单独导出

        // 3. 复合写法
        export * as ns from './moduleA.js';
        // 等同于
        import * as ns from './moduleA.js';
        export { ns };
    </script>

    <!-- 实际应用示例 -->
    <script type="module">
        // utils.js
        const formatDate = date => date.toLocaleDateString();
        const formatCurrency = num => `¥${num.toFixed(2)}`;
        const formatPercent = num => `${(num * 100).toFixed(1)}%`;
        export { formatDate, formatCurrency, formatPercent };

        // main.js
        import * as utils from './utils.js';

        const date = new Date();
        const price = 99.99;
        const ratio = 0.156;

        console.log(utils.formatDate(date));
        console.log(utils.formatCurrency(price));
        console.log(utils.formatPercent(ratio));
    </script>
</body>
</html> 